<template>
   <div>
    <div ref="charts" class="charts"></div>
   </div>
</template>

<script>
export default {
  name: 'pie-charts',
  props: {

  },
  data () {
    return {
      options: {
          title: {
              show: false
          },
          tooltip: {
            show: false
          },
          legend: {
              show: false,
              data:['衬衫']
          },
          xAxis: {
              data: ["衬衫"]
          },
          label: {
            normal: {
              a: {
                fontSize: '1.2em'
              }
            }
          },
          yAxis: {},
          series: [{
              selectedMode: true,
              hoverAnimation: false,
              radius: ['30%', '60%'],
              minAngle: 10,
              labelLine: {
                normal: {
                  show: true,
                  length: 15,
                  length2: 50
                }
              },
              itemStyle: {

              },
              type: 'pie',
              data: [{
                value: 25,
                name: '衬衫',
                label: {
                  normal: {
                    show: true,
                      position: ['50%', '50%'],                    
                      formatter: (para) => {
                        let str = [
                          '{a|54}%',
                          '固守P2P',
                          '{box|一年期} {box|保本}'
                        ].join('\n')
                        return str
                      },
                    color: '#555555',
                    align: 'right',
                    rich: {
                      a: {
                        fontSize: 18,
                        color: '#555555'
                      },
                      box: {
                        color: '#FE7A4A',
                        borderColor: '#FE7A4A',
                        borderRadius: 5,
                        borderWidth: 1,
                        padding: [1, 3],
                        fontSize: 8
                      }
                    }
                  }
                },
                  itemStyle: {
                    normal: {
                      color: '#F8E71C'
                    }
                  }
                },{
                  value: 18,
                  name: '裤子',
                  label: {
                    normal: {
                      show: true,
                      position: ['50%', '50%'],                      
                      formatter: (para) => {
                        let str = [
                          '{a|54}%',
                          '固守P2P',
                          '{box|一年期} {box|保本}'
                        ].join('\n')
                        return str
                      },
                      color: '#555555',
                      align: 'left',
                      rich: {
                          a: {
                            fontSize: 18,
                            color: '#555555'
                          },
                          box: {
                            color: '#FE7A4A',
                            borderColor: '#FE7A4A',
                            borderRadius: 5,
                            borderWidth: 1,
                            padding: [1, 3],
                            fontSize: 8
                          }
                        }
                      }
                    },
                    itemStyle: {
                      normal: {
                        color: '#7590FF'
                      }
                    }
                  }]
                }]
      }
    }
  },
  watch: {

  },
  methods: {

  },
  mounted () {
    this.charts = echarts.init(this.$refs.charts, 'wonderland')
    this.charts.setOption(this.options)
  },
  created () {

  }
}
</script>

<style lang="less" scoped>
.charts {
    width: 100%;
    height: 200px;
}
</style>

<style lang="less">

</style>
